<template>
    <div style="background-color: #dcdbdb;">
        <van-space direction="vertical" fill>
            <div class="hdWraper" style="height: 44px;">
                <van-nav-bar title="网易严选" style="border-bottom: 1px solid #ccc;">
                    <template #left>
                        <van-icon name="revoke" size="25" />
                    </template>
                    <template #right>
                        <van-icon name="search" size="25" />
                        <router-link to="/cart">
                            <van-icon name="cart-o" size="25" />
                        </router-link>
                    </template>
                </van-nav-bar>
            </div>


            <div class="m-notices">
                <van-notice-bar left-icon="volume-o" :scrollable="false" style="height: 45px;">
                    <van-swipe vertical class="notice-swipe" :autoplay="3000" :touchable="false" :show-indicators="false">
                        <van-swipe-item>明月直入，无心可猜。</van-swipe-item>
                        <van-swipe-item>仙人抚我顶，结发受长生。</van-swipe-item>
                        <van-swipe-item>今人不见古时月，今月曾经照古人。</van-swipe-item>
                    </van-swipe>
                </van-notice-bar>
            </div>

            <div class="m-shipAddress" style="margin-top: 10px;background-color: #ffffff;">

                <div class="u-icon u-address-bg"></div>

                <div class="m-address-item item" style="opacity: 1;">
                    <div>
                        <div class="left">
                            <p class="uname">xiaoli</p>
                            <span class="default">默认</span>
                        </div>
                        <div class="middle">
                            <div class="md-con">
                                <p class="uip">178****2244</p>
                                <p class="uinfo">天津市天津市河西区大营门街道快板楼13栋</p>
                            </div>
                        </div>
                        <i class="u-icon u-address-right"></i>
                    </div>
                </div>

            </div>

            <!-- 商品合计-->
            <div style="margin-bottom: 10px">
                <ul class="m-list">
                    <li>
                        <span>商品合计</span>
                        <span>￥ 299</span>
                    </li>
                    <li>
                        <span>邮费</span>
                        <span>￥ 0.00</span>
                    </li>
                    <li>
                        <span>优惠活动</span>
                        <span>-￥ 160.00</span>
                    </li>
                    <li>
                        <span>优惠劵</span>
                        <span>-￥ 0.00</span>
                    </li>
                </ul>
            </div>

            <div>
                <div v-for="item in tradeInfo?.detailArrayList" :key="item.skuId">
                    <van-card :num="item.skuNum" :price="item.orderPrice" :desc="item.skuName" title="每日抄底"
                        :thumb="item.imgUrl">
                        <template #tags>
                            <van-tag class="primary" plain type="primary">经典款(拖把杆*1+拖把头*1+拖布33cm*2+桶*1)</van-tag>
                        </template>

                    </van-card>
                </div>
            </div>

        </van-space>

        <van-submit-bar :price="tradeInfo?.totalAmount * 100" button-text="提交订单" @submit="onSubmit" />
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
    name: 'Trade',
})
</script>

<script lang="ts" setup>
import { Data, tradeList, submitOrder } from '@/api/trade/index'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const tradeInfo = ref<Data>()

const router = useRouter()

const getTradeList = async () => {
    let res = await tradeList()
    // console.log(res);
    tradeInfo.value = res
}

const onSubmit = async () => {
    let { tradeNo, detailArrayList } = tradeInfo.value

    let parms = {
        consignee: '张三',
        consigneeTel: '178****2244',
        deliveryAddress: '天津市天津市河西区大营门街道快板楼13栋',
        paymentWay: 'ONLINE',
        orderComment: '',
        orderDetailList: detailArrayList
    }

    let res = await submitOrder(tradeNo, parms)
    console.log(res);
    router.push({
        path: '/pay',
        query: {
            orderId: res
        }
    })

}





onMounted(() => {
    getTradeList()
})
</script>

<style scoped lang="scss">
.notice-swipe {
    height: 40px;
    line-height: 40px;
}

.u-address-bg {
    background: url(//yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/address-bg-67880192dc.png?imageView&type=webp) repeat-x;
    background-size: 0.6rem 0.1rem;
    display: block;
    width: 100%;
    height: 0.1rem;
}

.m-address-item {
    position: relative;
    padding: 0.4rem 0.86rem 0.4rem 0.06rem;
    // border-bottom: 1px solid #d9d9d9;
    text-align: left;
    line-height: .36rem;
    font-size: .28rem;
    color: #333;
    padding-left: 0.3rem;

    .left {
        position: relative;
        float: left;
        width: 1.2rem;
        margin-right: 0;

        .uname {
            margin-top: -0.07rem;
            margin-bottom: 0.05rem;
            line-height: 1.5;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            font-size: .3rem;
        }

        .default {
            display: block;
            width: 0.8rem;
            font-size: .3rem;
            line-height: .28rem;
            text-align: center;
            color: #DD1A21;
            border-radius: 3px;
            border: 2px solid #DD1A21;
        }
    }

    .uip {
        line-height: 1;
        margin-bottom: 0.06rem;
    }

    .uinfo {
        font-size: .24rem;
        line-height: .36rem;
        color: #666;
    }


}

.m-address-item .u-icon {
    background: url(//yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/address-right-f33ab6b984.png?imageView&type=webp) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 15px;
    bottom: 0;
    right: 0.16rem;
    margin: auto;
    width: 30px;

}


/* 商品合计 */
.m-list {
    display: block;
    padding-left: 0.3rem;
    background-color: #fff;
}


li {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    font-size: 16px;
    border-bottom: 1px solid #d9d9d9
}


.primary {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 80%;
    color: #999;
}
</style>